<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>Speed Typing</title>
</head>
<body class="bg-dark text-white">
    <header class="bg-info p-3 mb-5 text-center">
        <h1>Speed Typing Lite</h1>
    </header>
    <section class="container text-center">
        <div class="row">
            <div class="col-md-6 mx-auto"> <!-- auto margin - to center content -->
                <p>Type the following word in <span id="seconds" class="text-warning"></span> seconds: </p>
                <h2 id="current-word" class="display-2 mb-4"></h2> <!-- increased font size -->
                <div class="form-group col-md-4 mx-auto">
                    <label for="difficulty">Difficulty:</label>
                    <select class="form-control" id="difficulty">
                      <option>Easy</option>
                      <option>Medium</option>
                      <option>Hard</option>
                    </select>
                  </div>
                <input id="input-word" type="text" class="form-control form-control-lg" placeholder="Start typing ..." autofocus>
                <h4 id="message" class="mt-3 text-warning"></h4> 

                <!-- Time Left and Score -->
                <div class="row mt-3">
                    <div class="col-md-6">
                        <h3>Time Left: <span id="time-left">0</span></h3>
                    </div>
                    <div class="col-md-6">
                        <h3>Score: <span id="score">0</span></h3>
                    </div>
                    <!-- <div class="col-md-4">
                        <h3>High Score: <span id="high-score">0</span></h3>
                    </div> -->
                </div>

                <!-- Instructions -->
                <div class="row mt-4">
                    <div class="col-md-10 mx-auto">
                        <div class="card card-body bg-secondary">
                            <h5>Instructions</h5>
                            <p>Type each word in the given amount of time to score. To play again, just type the current word. Your score will reset.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <footer>
        <p class="text-center small mt-3 text-muted">Coded by <a href="https://github.com/aman-maharshi">Aman Maharshi</a></p>
    </footer>
    <script src="script.js"></script>
</body>
</html>
